<html>

<head>
    <link rel="stylesheet" href="iconFont.css">
    <script src="vue.min.js"></script>
    <meta charset="utf-8">
</head>
<style type="text/css">
    body {
        position: relative;
        -webkit-font-smoothing: subpixel-antialiased;
        margin: 0px;
        background: #2c2c2c;
        /* linear-gradient(rgb(45, 45, 45), rgb(25, 25, 25)); */
        color: rgb(189, 189, 189);
        /* font-size: 12px; */
    }

    button {
        color: rgb(235, 233, 233);
        /* background-color: rgb(78, 77, 77); */
        border-radius: 0.3em;
        border-image: none;
        border-style: none;
        background-color: #2c2c2c;
        border: 0.5px solid rgb(87, 86, 86);
    }

    button:active{
        background-color: #070707;
    }

    :root {
        --top-and-bottom: calc(100vh - 54px);
        --top: calc(100vh - 32px);
    }

    webview {
        /* border:solid 1px darkgray;
        border-left: unset;
        border-right: unset; */
    }

    #app {
        display: flex;
        flex-direction: row;
        height: 100vh;
        overflow-x: hidden;
    }

    .gamePanel {
        position: relative;
        display: flex;
        flex-direction: column;
        border-right: solid 0.5px rgb(87, 86, 86);
        height: 100%
    }

    .nodePanel {
        display: flex;
        flex-direction: column;
        height: 100%;
        flex: 1;
        /* min-width: calc(15em + 300px); */
        /* margin-left: -0.5px; */
    }

    .nodePanel hr {
        /* width: calc(100% - 0.5px) */
        margin-left: -0.5px;
    }



    .Component input[type="search"] {
        display: block;
        width: calc(100% - 8px);
        margin-top: 2px;
        margin-left: 4px;
        margin-right: 4px;
        color: black;
        background-color: whitesmoke;
        border: 1px;
        border-radius: 0.4em;
    }


    .gameBtns {
        display: flex;
        padding: 4px;
        background-color: #484848;
    }

    .gameBtnsRight {
        /* flex:1; */
        /* align-content: flex-end; */
        /* border:solid 1px red; */
    }

    .gameBtnsLeft {
        flex: 1;
    }

    .consolePanel {
        flex: 1 1 0%;
        display: flex;
        position: relative;
        flex-direction: column;
        max-height: var(--top);
    }

    .nodePanel webview{
        flex: 1 1 0%
    }

    .consolePanel input[type="search"] {
        color: whitesmoke;
        background-color: #2c2c2c;
        border: 1px solid gray;
        border-radius: 0.3em;
    }

    .codeTips {
        position: absolute;
        bottom: 20;
        left: 0;
        right: 0;
        background-color: rgb(46, 46, 46);
        padding: 0.3em;
        border-radius: 0.5em;
        box-shadow: 0 0 12px 1px black;
    }

    .helpPanel .helpTitle {
        font-weight: bold;
        color: lightblue;
    }

    .helpPanel a {
        word-wrap: break-word;
        word-break: break-all;
    }

    .codeTips .helpCon {
        display: flex;
        justify-content: space-between;
    }

    .codeTips .help {
        color: darkkhaki;
    }

    .tipsCon {
        max-height: 20em;
        overflow-y: auto;
    }

    .tipsCon span {
        color: rgb(150, 150, 150);
    }

    .codeTips .selected {
        background-color: black;
    }

    .consolePanel a {
        white-space: nowrap;
    }

    .consolePanel .topMenu {
        padding-left: 5px;
        /* text-align: left; */
    }

    .consolePanel .topMenu>input {
        margin-right: 0.5em;
    }

    .consolePanel .topMenu label {
        margin-right: 0.5em;
        white-space: pre;
    }

    .logs {
        word-wrap: break-word;
        word-break: break-all;
        overflow-y: auto;
        font-size: 0.9em;
        background: #111111;
    }

    .gamePanel .logs {
        background: unset;
    }

    .logs .logTime {
        color: rgb(31, 154, 255);
    }

    .logItem:hover {
        background-color: black;
    }

    .logItem {
        /* content-visibility: auto; */
        padding-left: 4px;
        border-bottom: solid 0.5px rgba(196, 194, 194, 0.151);
        word-break: break-all;
        word-wrap: break-word;
    }

    .logItem .filter {
        /* font-weight: bold; */
        color: greenyellow;
        background-color: rgba(210, 105, 30, 0.658);
    }

    /* .logItem span{
        line-height: 1em;
    } */

    .tab {
        display: flex;
        padding: 4px;
        padding-bottom: 0px;
        align-items: stretch;
        border-bottom: solid 0.5px rgb(87, 86, 86);
        white-space: nowrap;
        background-color: #484848;
    }

    .tabs {
        flex: 1;
        display: flex;
        align-items: stretch;
    }


    .tabItem {
        display: inline-block;
        margin-right: 0.5em;
        padding-left: 0.5em;
        padding-right: 0.5em;
        padding-bottom: 4px;
        user-select: none;
        cursor: pointer;
        background-color: #353535;
        color: #d4d4d4;
        /* line-height: 100%;     */
        /* height:100%; */
    }

    .tabs .selected {
        background-color: #2c2c2c;
        border: 0.5px solid rgb(87, 86, 86);
        border-bottom: 0;
        margin-bottom: -1px;

        cursor: default;
        color: whitesmoke;
    }

    .nodeTree {
        overflow: auto;
        min-width: 242px;
        max-height: var(--top-and-bottom);
        border-right: solid 0.5px rgb(87, 86, 86);
        flex: 1;
        /* position: relative;        */
    }

    .node {
        font-size: 13px;
    }

    .searchPanel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        background-color: black;
        padding: 0.1em;
        border-radius: 0.5em;
    }

    .searchBox {
        display: flex;
        padding-left: 2px;
        padding-right: 2px;
    }

    .searchBox {
        border: solid 0.5px rgb(98, 100, 100);
        border-radius: 0.5em;
    }

    .searchBox input[type="search"] {
        color: white;
        flex: 1;
        background: none;
        outline: none;
        border: none;
        font-size: 0.9em;
    }

    .searchBox input[type="search"]:focus {
        outline: none;
    }

    .searchTitle {
        padding: 0.3em;
        padding-bottom: 0;
    }

    .searchTitle label {
        white-space: pre;
    }

    .searchList {
        padding: 0.3em;
        padding-bottom: 0;
        overflow-y: auto;
        flex: 1;
        max-height: 15em;
    }

    .searchList .itemPath {
        color: gray;
        font-size: 0.9em;
    }


    .inspectPanel {
        overflow: auto;
        overflow-x: hidden;
        font-size: 13px;
        min-width: 300px;
        /* width:auto;        
        max-width: 360px; */
        height: auto;
        max-height: var(--top-and-bottom);
        /* resize:horizontal; */
        /* padding:2px; */
    }

    .inspectPanel input[type="number"] {
        width: 4.5em;
    }

    .nodeName {
        position: sticky;
        top: 0;
        background-color: #2c2c2c;
        border-bottom: solid 1px rgb(87, 86, 86);
    }

    .nodeName {
        display: flex;
        /* flex:1; */
        padding: 2px;
        padding-left: 4px;
        padding-right: 4px;
    }

    /* .nodeName label{
        flex:1;
    } */
    .comProperty,
    .nodeProperty {
        display: flex;
        align-items: center;
        color: whitesmoke;
        word-break: keep-all;
        white-space: nowrap;
        padding: 2px;
        margin-top: 3px;
        margin-bottom: 3px;
        padding-left: 4px;
        padding-right: 4px;
        width: auto;

        /* white-space:pre-wrap; */
    }

    .comProperty input[type="color"] {
        background-color: unset;
    }

    .comProperty select {
        background-color: unset;
        color: whitesmoke;
    }

    .comProperty option {
        background-color: black;
        color: whitesmoke;
    }

    .comProperty:hover {
        background-color: black;
    }



    .nodePropertyTitle {
        display: inline-block;
        width: 5em;
        color: rgb(150, 150, 150);
        text-align: right;
        word-wrap: break-word;
        /* word-break:normal; */
        white-space: pre-wrap;
        line-height: 0.95em;
        margin-right: 1px;
    }

    .nodePropertyTitle::selection {
        background-color: #2553c9;
    }

    .comProperty .nodePropertyTitle {
        width: 8em;
    }

    /* .comProperty */
    a {
        color: rgb(14, 127, 233);
        cursor: pointer;
    }

    a:hover {
        color: rgb(52, 146, 235);
    }

    a:active {
        color: rgb(104, 170, 233);
    }

    .nodePropertySubTitle {
        display: inline-block;
        width: 1em;
        text-align: start;
        line-height: 0.95em;
    }


    .colorRect {
        width: 1em;
        height: 1em;
        display: inline-block;
        border-width: solid 1px black;
    }

    .comProperty .nodePropertySubTitle {
        /* overflow-x: hidden; */
        width: auto;
        max-width: 172px;
        word-wrap: break-word;
        /* word-break:normal; */
        /* white-space: wrap; */
        line-height: 0.95em;
    }

    .prewrap {
        white-space: pre-wrap;
    }

    .nodePropertySubTitle .icon-wrong2 {
        color: rgb(253, 94, 94);
    }

    .nodePropertySubTitle .icon-right {
        color: lightgreen;
    }

    .nodeTitle {
        /* content-visibility: auto; */
        /* pointer-events: none; */
        display: block;
        user-select: none;
        /* word-wrap:; */
        word-break: keep-all;
        white-space: nowrap;
    }

    .nodeTitle:hover {
        background-color: rgb(82, 80, 80);
    }

    .dcDesc {
        font-weight: bold;
        color: wheat;
    }

    hr {
        width: calc(100% - 0px);
        padding: 0;
        margin: 0;
        border: none;
        border-bottom: solid 1px rgb(87, 86, 86);
        /* background-color: red; */
        /* border-color: rgb(87, 86, 86);
        border-width: 0.5px; */

    }

    .setting {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        max-height: calc(100%);
        width: 20em;
        box-shadow: -1px 0 4px 0px black;
        background-color: #2c2c2c;
        padding: 1em;
        padding-top: 0;
        display: flex;
        /* z-index:200; */
        flex-direction: column;
        user-select: none;
        overflow-y: auto;
    }

    .setting textarea {
        width: 100%;
        resize: vertical;
        max-height: 5em;
    }


    .about {
        display: flex;
        /* z-index:200; */
        flex-direction: column;
        user-select: text;
    }

    .about .nodePropertyTitle {
        user-select: text;
        cursor: default;
        margin-bottom: 10px;
    }

    .setting span {
        cursor: pointer;
    }

    .settingHeader {
        display: flex;
        padding: 2px;
        padding-top: 1em;
        position: sticky;
        top: 0;
        background-color: #2c2c2c;
        border-bottom: 0.5px solid rgb(87, 86, 86);
    }

    .settingTitle {
        flex: 1;
        text-align: center;
        font-size: 2em;
    }

    .setting label {
        margin-top: 0.5em;
    }

    .searcItem{
        content-visibility: auto;
        height:43px;
        /* contain: size; */
    }

    .slide-fade-enter-active {
        transition: all .3s ease;
    }

    .slide-fade-leave-active {
        transition: all .2s;
    }

    .slide-fade-enter,
    .slide-fade-leave-to

    /* .slide-fade-leave-active for below version 2.1.8 */
        {
        transform: translateX(20em);
        /* opacity: 0; */
    }

    .ResolutionSelector {
        position: absolute;
        top: 31px;
        right: 0px;
        background-color: rgb(66, 66, 66);
        padding: 0.3em;
        border-radius: 0.5em;
        box-shadow: 0 0 12px 1px black;
    }

    .ResolutionSelector hr {
        margin-bottom: 0.5em;
    }

    .ResolutionSelector input[type="number"] {
        /* width: 100%; */
        /* margin: 0.3em; */
    }

    .resoItem {
        cursor: pointer;
        border-radius: 0.5em;
        padding: 0.2em;
        display: flex;
        /* min-width: 200px; */
    }

    .flex1 {
        flex: 1;
    }

    .sizeName {
        display: flex;
        min-width: 200px;
        border-radius: 0.5em;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    /* .sizeName .name{
        width:80px;
    } */
    .sizeName:hover {
        background-color: lightgrey;
        color: black;
    }


    .cocosPanel {
        padding: 1em;
        max-height: var(--top);
        overflow-y: auto
    }

    .varsCon {
        margin-top: 0.5em;
        display: grid;
        grid-template-columns: 15em 15em
    }

    .localStorageCon {
        margin-top: 0.5em;
        display: flex;
        flex-direction: column;
    }

    .varItem {
        /* width:10em; */
        word-break: break-all;
    }

    .varItemValue {
        color: lightgray;
    }

    .extensionPanel {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 1em;
    }

    .extensionPanel textarea {
        flex: 1;
        width: 100%;
        resize: none;
    }

    .extensionPanel hr {
        margin-top: 1em;
        margin-bottom: 1em;
    }
</style>

<body>
    <div id="app" style="visibility:hidden;">
        <div class="gamePanel" :style="setting.gamePanelStyle">
            <div class="gamebtns">
                <div class="gameBtnsLeft">
                    <button @click="refresh" title="Refresh Game">
                        <span class="iconfont icon-shuaxin"></span>
                    </button>
                </div>
                <div class="gameBtnsRight">
                    <button @click="playOrPause" title="Play|Pause Game">
                        <span :class="[pauseIcon]"></span>
                    </button>
                    <button @click="toggleFps" title="Show|Hide FPS">
                        <span class="iconfont icon-zoushi"></span>
                    </button>
                    <button @click="toggleHover" :style="hoverBtnStyle">
                        <span class="iconfont icon-aim1" title="find by Hover"></span>
                    </button>
                    <button @click="showResolutionSelector=!showResolutionSelector">
                        <span class="iconfont icon-xuanzhuan"></span>
                    </button>
                    <button v-if="!showDevToolInTab" @click="openWvDevTool" title="Open DevTool of Game Page">
                        <span class="iconfont icon-tools-hardware"></span>
                    </button>
                </div>
            </div>
            <resolution-selector v-if="showResolutionSelector"></resolution-selector>
            <hr>
            <!-- http://gameview.creator-star.cn/cocos/cake/index.html -->
            <!-- http://localhost:7456 -->
            <webview ref="wv" preload="./preload.js" :src="gameUrl" :style="setting.webviewStyle"
                :disablewebsecurity="disableWebSec" nodeintegrationinsubframes="true"
                webpreferences="contextIsolation=no"></webview>
            <hr>
            <div class="logs" ref="logs">
                <div class="logItem" v-for="l in smallLogs" :style="{color:logColor(l.t)}"><span
                        class="logTime">{{l.time}}:</span>{{l.d}}</div>
            </div>
        </div>
        <div class="nodePanel">
            <div class="tab">
                <div class="tabs">
                    <div :class="{tabItem:true,selected:tab==0}" @click="tab=0" @contextmenu="showMenu">
                        <span class="iconfont icon-shuxingjiegou"></span>{{sceneName}}
                        <a v-show="showRefreshTreeBtn" @click="forceUpdateTree" class="iconfont icon-shuaxin"></a>
                    </div>
                    <div :class="{tabItem:true,selected:tab==1}" @click="tab=1">
                        <span class="iconfont icon-terminal-box-line"></span>{{showDevToolInTab?"DevTool":"Console"}}
                    </div>
                    <div :class="{tabItem:true,selected:tab==2}" @click="tab=2">
                        <span class="iconfont icon-jiarehuoyan-xianxing"></span>Cocos
                    </div>
                    <div :class="{tabItem:true,selected:tab==3}" @click="tab=3">
                        <span class="iconfont icon-jiedian"></span>Extension
                    </div>

                </div>

                <div>
                    <button @click="showHelp" title="Help">
                        <span class="iconfont icon-help"></span>
                    </button>
                    <!-- <button @click="location.reload()" title="Refresh Plugin">
                        <span class="iconfont icon-shuaxin"></span>
                    </button> -->
                    <button @click="showSetting" title="Setting">
                        <span class="iconfont icon-shezhi"></span>
                    </button>
                </div>
            </div>
            <!-- <hr> -->
            <!-- "n","deep","selected","close" -->
            <div style="display:flex;flex:1;position:relative;" v-show="tab==0">
                <div v-if="nodeTree" class="nodeTree">
                    <node-view v-for="sn in nodeTree.children" :n="sn" :deep="1" :selected="selectedNode==sn.id"
                        :key="sn.id"></node-view>
                </div>
                <div class="inspectPanel" v-if="nodeDetail">
                    <node-detail-view :detail="nodeDetail"></node-detail-view>
                    <node-component v-for="com in nodeDetail.coms" :com="com" :key="com"></node-component>
                </div>
                <search-panel></search-panel>
            </div>
            <webview v-show="tab==1 && showDevToolInTab" ref="devtools" src="about:blank"></webview>
            <console-panel v-if="!showDevToolInTab && tab==1"></console-panel>
            <cocos-panel v-if="tab==2"></cocos-panel>
            <extension-panel v-if="tab==3"></extension-panel>
        </div>
        <my-help ref="help"></my-help>
    </div>


    <div class="settingBox" id="setting">
        <transition name="slide-fade">
            <div class="setting" style="display: none;" v-show="show">

                <div class="settingHeader">
                    <span class="iconfont icon-shanchu" @click="close" style="font-size: 1.5em;"></span>

                    <div class="settingTitle">Setting </div>

                </div>

                <!-- <hr> -->
                <label>
                    Log Count Under GameView:
                    <!-- {{logCount}} -->
                    <input type="number" @change="saveToStorage" v-model="logCount" min="0" max="100" step="1" />
                </label>
                <label>
                    Url Parameters:
                    <!-- {{logCount}} -->
                    <br>
                    <textarea placeholder="example:?xxx=y&abc=d" @change="saveToStorage" v-model="urlParams"></textarea>
                </label>
                <label>
                    Custom Url:
                    <!-- {{logCount}} -->
                    <br>
                    <textarea placeholder="example:?http://xxx.com" @change="saveToStorage"
                        v-model="customUrl"></textarea>
                </label>
                <label>
                    <input type="checkbox" @change="saveToStorage" v-model="retinaEnable" />
                    Retina Enable
                </label>
                <label>
                    <input type="checkbox" @change="saveToStorage" v-model="autoUpdateTree" />
                    Auto Update Node Tree
                </label>
                <label>
                    <input type="checkbox" @change="saveToStorage" v-model="syncNodeDetail" />
                    Sync Node Detail
                </label>                
                <hr>
                <br>
                <b>Need Restart Inspector After Change</b>
                <label>
                    <input type="checkbox" @change="saveToStorage" v-model="disableWebSec" />
                    Disable Web Security
                </label>
                <label>
                    <input type="checkbox" @change="saveToStorage" v-model="showDevToolInTab" />
                    Show DevTool In Tab
                </label>
                <hr>
                <br>
                <b>FGUI Setting</b>
                <label>
                    <input type="checkbox" @change="saveToStorage" v-model="displayAsFairyTree" />
                    Display As Fairy Tree
                </label>
                <label>
                    <input type="checkbox" :disabled="!displayAsFairyTree" @change="saveToStorage" v-model="hideFairyComContainer" />
                    Hide Fairy Component Container
                </label>

                <hr>
                <br>
                <div v-once>Feedback: <a @click="remote.shell.openExternal('https://forum.cocos.org/t/topic/116855')"
                        target="_blank">https://forum.cocos.org/t/topic/116855</a></div>
                <br>
                <div v-once>Check New Version: <a
                        @click="remote.shell.openExternal('https://store.cocos.com/app/detail/2940')"
                        target="_blank">https://store.cocos.com/app/detail/2940</a></div>
                <hr>
                <br>
                <!-- <br> -->
                <!-- <br> -->
                <div class="about">
                    <div class="settingHeader">
                        <div class="settingTitle">About </div>
                    </div>
                    <!-- <hr> -->
                    <div>
                        <span class="nodePropertyTitle">Author: </span>
                        chuan.z
                    </div>
                    <div>
                        <span class="nodePropertyTitle">Contact: </span>
                        <a @click="remote.shell.openExternal('mailto:bytetalking@qq.com')">bytetalking@qq.com</a>
                    </div>
                    <div>
                        <span class="nodePropertyTitle">WebSite: </span>
                        <a @click="remote.shell.openExternal('https://bytetalking.com')">https://bytetalking.com</a>
                    </div>
                    <hr>
                    <div>
                        <span class="nodePropertyTitle">WeChat Offical Account: </span>
                        ByteTalking
                    </div>
                    <div>
                        <span class="nodePropertyTitle">QRCode: </span>
                        <img src="wechatOC.jpeg" style="max-width: 150px;max-height: 150px;">
                    </div>
                </div>
            </div>
        </transition>
    </div>


    <script src="./app.js">

    </script>
</body>

</html>